<template>
  <svg aria-hidden="true">
    <use :class="fillClass" :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
  name:{
    type:String,
    required:true
  },
  color: {
    type:String
  },
  fillClass: {
    type:String
  }
})

// 真实显示的svg颜色的类名
const symbolId = computed(() => `#icon-${props.name}`)
</script>

<!--<template>-->
<!--  <svg aria-hidden='true'>-->
<!--    <use-->
<!--      :xlink:href='symbolId'-->
<!--      :class='fillClass'-->
<!--      :fill='color'-->
<!--    />-->
<!--  </svg>-->
<!--</template>-->

<!--<script setup>-->
<!--import { computed } from 'vue'-->

<!--const props = defineProps({-->
<!--  /**-->
<!--   * 1. 显示的svg-->
<!--   * 2. svg图标的颜色-->
<!--   * 3. tailwind 指定 svg 颜色的类名-->
<!--   */-->
<!--  name : {-->
<!--    type: String,-->
<!--    required: true-->
<!--  },-->
<!--  color: {-->
<!--    type: String-->
<!--  },-->
<!--  fillClass: {-->
<!--    type: String-->
<!--  }-->
<!--})-->

<!--// 真实现实的 svg 图标 （拼接 #icon-）-->
<!--const symbolId = computed(() => `#icon-${props.name}`)-->
<!--</script>-->

<!--<style lang='scss' scoped></style>-->
